<template>
    <div>
        <nav>
            <ul>
                <li :class="isShow == 0 ? 'active' : ''" @click="isShow = 0">全部({{ essayAll.arr.length }})</li>
                <li :class="isShow == 1 ? 'active' : ''" @click="isShow = 1">未审核({{ essayCom.length }})</li>
                <li :class="isShow == 2 ? 'active' : ''" @click="isShow = 2">已通过({{ essayComY.length }})</li>
                <li :class="isShow == 3 ? 'active' : ''" @click="isShow = 3">未通过({{ essayComN.length }})</li>
            </ul>
        </nav>
        <template v-show="isShow == 0">
            <el-table height="500" :data="essayAll.arr" border style="width: 100%">
                <el-table-column prop="title" label="文章名" width="160" />
                <el-table-column prop="author" label="作者" width="130" />
                <el-table-column prop="views" label="观看数量" width="130" />
                <el-table-column prop="likes" label="点赞数量" width="130" />
                <el-table-column prop="collect" label="收藏数量" width="130" />
                <el-table-column prop="stypeT" label="文章类型" width="130" />
                <el-table-column prop="commentNum" label="评论数" width="130" />
                <el-table-column prop="sText" label="文章状态" width="140" />
                <el-table-column fixed="right" label="操作" width="100">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click.prevent="essayDetailed(scope.$index, 'own')"> 查看 </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <template v-show="isShow == 1">
            <el-table height="500" :data="essayCom" border style="width: 100%">
                <el-table-column prop="title" label="文章名" width="160" />
                <el-table-column prop="author" label="作者" width="140" />
                <el-table-column prop="views" label="观看数量" width="140" />
                <el-table-column prop="likes" label="点赞数量" width="140" />
                <el-table-column prop="collect" label="收藏数量" width="140" />
                <el-table-column prop="stypeT" label="文章类型" width="140" />
                <el-table-column prop="commentNum" label="评论数" width="140" />
                <el-table-column prop="s" label="文章状态" width="140" />
                <el-table-column fixed="right" label="操作" width="180">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click.prevent="essayDetailed(scope.$index, 'arr')"> 查看 </el-button>
                        <el-button link type="primary" size="small" @click.prevent="setEssayApi(scope.$index, 1, 'arr')"> 通过</el-button>
                        <el-button link type="primary" size="small" @click.prevent="setEssayApi(scope.$index, 2, 'arr')"> 不通过 </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <template v-show="isShow == 2">
            <el-table height="500" :data="essayComY" border style="width: 100%">
                <el-table-column prop="title" label="文章名" width="160" />
                <el-table-column prop="author" label="作者" width="140" />
                <el-table-column prop="views" label="观看数量" width="140" />
                <el-table-column prop="likes" label="点赞数量" width="140" />
                <el-table-column prop="collect" label="收藏数量" width="140" />
                <el-table-column prop="stypeT" label="文章类型" width="140" />
                <el-table-column prop="commentNum" label="评论数" width="140" />
                <el-table-column prop="s" label="文章状态" width="140" />
                <el-table-column fixed="right" label="操作" width="180">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click.prevent="essayDetailed(scope.$index, 'pass')"> 查看 </el-button>
                        <el-button link type="primary" size="small" @click.prevent="setEssayApi(scope.$index, 2, 'pass')"> 不通过 </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <template v-show="isShow == 3">
            <el-table :data="essayComN" border style="width: 100%">
                <el-table-column prop="title" label="文章名" width="160" />
                <el-table-column prop="author" label="作者" width="140" />
                <el-table-column prop="views" label="观看数量" width="140" />
                <el-table-column prop="likes" label="点赞数量" width="140" />
                <el-table-column prop="collect" label="收藏数量" width="140" />
                <el-table-column prop="stypeT" label="文章类型" width="140" />
                <el-table-column prop="commentNum" label="评论数" width="140" />
                <el-table-column prop="s" label="文章状态" width="140" />
                <el-table-column fixed="right" label="操作" width="180">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click.prevent="essayDetailed(scope.$index, 'fail')"> 查看 </el-button>
                        <el-button link type="primary" size="small" @click.prevent="setEssayApi(scope.$index, 1, 'fail')"> 通过 </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
    <div class="essay-detailed" v-show="show" @click="show = false">
        <div class="wrap">
            <div class="content">
                <div class="title">{{ essayDetailedData.obj.title }}</div>
                <div class="essay-content" v-html="essayDetailedData.obj.content"></div>
                <ul>
                    <li v-for="i in essayDetailedData.obj.pic">
                        <img :src="getImg(i)" alt="" />
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import { getEssayAll, setEssay, getEssayDetailed, getImg } from "../api/index";
import axios from "axios";
let isShow = ref(0);
let show = ref(false);
let essayAll = reactive({ arr: [] });
let essayDetailedData = reactive({ obj: {} });
let getEssayAllApi = () => {
    axios(getEssayAll()).then(({ data }) => {
        essayAll.arr = data.data;
    });
};
getEssayAllApi();
let essayCom = computed(() => {
    return essayAll.arr.filter((i) => {
        return i.s == 0;
    });
});
let essayComY = computed(() => {
    return essayAll.arr.filter((i) => {
        return i.s == 1;
    });
});
let essayComN = computed(() => {
    return essayAll.arr.filter((i) => {
        return i.s == 2;
    });
});
let setEssayApi = (index, s, type) => {
    let id;
    if (type == "arr") {
        id = essayCom.value[index].id;
    } else if (type == "pass") {
        id = essayComY.value[index].id;
    } else if (type == "fail") {
        id = essayComN.value[index].id;
    }
    axios
        .post(setEssay(), {
            id,
            s,
        })
        .then(({ data }) => {
            if (data.s == 200) {
                ElMessage({
                    message: data.m,
                    type: "success",
                });
                setTimeout(() => {
                    location.reload(true);
                }, 500);
            } else {
                ElMessage.error(data.m);
            }
        });
};

let getEssayDetailedApi = (id) => {
    axios(getEssayDetailed(id)).then(({ data }) => {
        essayDetailedData.obj = data.data[0];
        console.log(essayDetailedData.obj);
    });
};
let essayDetailed = (index, type) => {
    show.value = true;
    let id;
    if (type == "arr") {
        id = essayCom.value[index].id;
    } else if (type == "pass") {
        id = essayComY.value[index].id;
    } else if (type == "fail") {
        id = essayComN.value[index].id;
    } else {
        id = essayAll.arr[index].id;
    }
    getEssayDetailedApi(id);
};
</script>

<style lang="scss" scoped>
nav {
    ul {
        display: flex;
        height: 30px;
        line-height: 30px;
        margin-bottom: 10px;
        font-size: 14px;
        li {
            width: 120px;
            text-align: center;
            margin-right: 10px;
            border-radius: 15px;
            box-shadow: 0 0 2px rgba($color: #000000, $alpha: 0.2);
        }
        .active {
            background-color: #8076a3;
            color: #fff;
        }
    }
}
template {
    display: block;
}
.essay-detailed {
    position: absolute;
    width: 100%;
    min-height: 100%;
    background-color: rgba($color: #000000, $alpha: 0.2);
    top: 0;
    left: 0;
    z-index: 999;
    .wrap {
        width: 50rem;
        height: 31.25rem;
        margin: 6.25rem auto;
        background-color: #fff;
        border-radius: 10px;
        padding: 0.625rem;
        .content {
            width: 100%;
            height: 100%;
            overflow-y: auto;
            .title {
                font-size: 34px;
                font-weight: 600;
                text-align: center;
            }
            .essay-content {
                margin: 0.625rem 0;
                font-size: 22px;
            }
            img {
                width: 100%;
            }
        }
    }
}
</style>
